<template>
  <!-- 封装vant的选择器 -->
  <div>
    <van-field readonly
      clickable
      name="picker"
      :value="text"
      :label="label"
      :placeholder="placeholder"
      @click="showPicker = true" />
    <van-popup v-model="showPicker"
      position="bottom">
      <van-picker show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default: null,
      type: Array,
    },
    value: {
      default: "",
      type: String,
    },
    label: {
      default: "选择器",
      type: String,
    },
    placeholder: {
      default: "点击选择",
      type: String,
    },
  },
  computed: {
    columns() {
      let values = this.data.map((item) => {
        return item.value;
      });
      return values;
    },
  },
  data() {
    return {
      showPicker: false,
      text: "",
    };
  },
  methods: {
    onConfirm(value, index) {
      let key = this.data[index].key;
      this.text = value;
      this.$emit("input", key);
      this.showPicker = false;
    },
  },
};
</script>